<template>
<div id="root">
  <h2>人员列表(遍历数组)</h2>
  <ul>
    <li v-for="(p,index) in persons" :key="index">
      {{p.name}}-{{p.age}}
    </li>
  </ul>

  <h2>汽车信息(遍历对象)</h2>
  <ul>
    <li v-for="(value, k) in car" :key="k">
      {{k}}-{{value}}
    </li>
  </ul>

  <h2>遍历字符串</h2>
  <ul>
    <li v-for="(char, index) in str" :key="index">
      {{char}}-{{index}}
    </li>
  </ul>

  <h2>遍历指定次数</h2>
  <ul>
    <li v-for="(number, index) in 5" :key="index">
      {{index}}-{{number}}
    </li>
  </ul>
</div>
</template>

<script>
export default {
  name: "JiBenLieBiao",
  data() {
    return {
      persons: [
        {id:'001', name:'张三',age:18},
        {id:'002', name:'李四',age:19},
        {id:'003', name:'王五',age:20}
      ],
      car: {
        name: '奥迪A8',
        price: '70w',
        color: '黑色'
      },
      str: 'hello'
    }
  }
}
</script>

<style scoped>

</style>
